<template>
  <div>
    <el-upload
      action="auto"
      :file-list="imageList"
      list-type="picture-card"
      :http-request="uploadPic"
      :on-success="handleAvatarSuccess"
      :before-upload="beforeAvatarUpload"
      :on-preview="handlePictureCardPreview"
      :on-remove="handleRemove">
      <i class="el-icon-plus"></i>
    </el-upload>
    <el-dialog :visible.sync="dialogVisible">
      <img width="100%" :src="dialogImageUrl" alt="">
    </el-dialog>
  </div>
</template>

<script>
import axios from 'axios'
import 'element-ui/lib/theme-chalk/index.css'
export default {
  name: 'UploadPic',
  data () {
    return {
      imageUploadCount: 0, // 上传文件计数
      imageUploadType: {
        type: 'qiniu' // 用七牛云上传
      },
      imageList: [], // 文件列表
      dialogImageUrl: '',
      dialogVisible: false
    }
  },
  created () {
  },
  methods: {
    uploadPic (request) {
      console.log('uploadPic', request)
      const file = request.file
      const formData = new FormData()
      formData.append('img', file)
      formData.append('type', 'qiniu')
      axios.defaults.headers['x-auth-token'] = 'f7d3d1cd-3d0b-466e-81bd-28b01ec8d4b1'
      /**
       * 使用axios上传文件的时候要配置好
       * config/index.js 中的 proxyTable
       * 否则会一直产生跨域问题
       */
      axios.interceptors.request.use(config => {
        config.headers['x-auth-token'] = '3e7e5351-c381-4598-afc0-32415614f4e5'
        console.log('api.js -> ', config)
        return config
      }, error => {
        // Do something with request error
        console.log(error) // for debug
        Promise.reject(error)
      })
      // axios.defaults.baseURL = '/api'
      // axios.get(
      //   '/api/file/upload/ureport'
      // ).then(data => {
      //   console.log(data)
      // }).catch(e => {
      //   console.log(e)
      // })
      axios.post(
        '/api/file/upload/image',
        formData
        // {
        //   'headers': {
        //     'Content-Type': 'multipart/form-data',
        //     'x-auth-token': '3e7e5351-c381-4598-afc0-32415614f4e5'
        //   }
        // }
      ).then(data => {
        console.log(data)
      }).catch(e => {
        console.log(e)
      })
    },
    handleAvatarSuccess (res, file) {
      this.dialogImageUrl = URL.createObjectURL(file.raw)
      this.imageUploadCount += 1
      // console.log('上传成功 ---> ', this.dialogImageUrl, res, file, this.imageUploadCount)
    },
    beforeAvatarUpload (file) {
      // console.log('beforeAvatarUpload ---> ', file)
      if (this.imageUploadCount >= 1) {
        this.$message.error('很抱歉目前只允许上传1张图片!')
        return false
      }
      let isJPG = false
      const fileTypeList = ['image/x-icon', 'image/png', 'image/jpeg', 'image/bmp', 'image/gif']
      const fileType = file.type
      for (let index in fileTypeList) {
        if (fileType === fileTypeList[index]) {
          isJPG = true
          break
        }
      }
      const isLt2M = file.size / 1024 / 1024 < 2
      if (!isJPG) {
        this.$message.error('上传头像图片只能是 png、jpg、jpeg、bmp、gif、x-icon 其中一种格式!')
      }
      if (!isLt2M) {
        this.$message.error('上传头像图片大小不能超过 2MB!')
      }
      return isJPG && isLt2M
    },
    handleRemove (file, fileList) {
      this.imageUploadCount -= 1
      // console.log('handleRemove ---> ', file, fileList, this.imageUploadCount)
    },
    handlePictureCardPreview (file) {
      // console.log('handlePictureCardPreview ---> ', file)
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    }
  }
}
</script>

<style scoped>

</style>
